<template>
  <a-card :bordered="true">
    <div v-if="!onAuth">暂无功能菜单！</div>
    <div v-else>
    <j-form-container :disabled="false">
    
    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
    <a-row :gutter="48">
      <a-col  :span="12">
        <a-form-model-item label="流程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processName">
          <p style="color:#000"><b>{{model.processName}}</b></p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="流程KEY" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processKey">
          <p style="color:#000"><b>{{model.processKey}}</b></p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isUrging">
          <p style="color:#000"><b>允许流程发起人催办&nbsp;&nbsp;&nbsp;</b> <a-switch v-model="model.isUrgingStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isUrging')"/></p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
      <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="">
          <p style="color:#000"><b>发起人允许催办类型&nbsp;&nbsp;&nbsp;</b>
            <a-checkbox-group v-model="model.isUrgingTypeArray" @change="onChangeNotifyType">
                <a-checkbox value="1">系统消息</a-checkbox>
                <a-checkbox value="2">邮件</a-checkbox>
                <a-checkbox value="3">APP消息提醒</a-checkbox>
            </a-checkbox-group>
          </p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
      <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="">
          <p style="color:#000"><b>发起人允许催办的审核人审核间隔时间&nbsp;&nbsp;&nbsp;</b>
            <a-input-number
                      :max="99999999"
                      :min="0"
                      v-model="model.urgingProcessTime"
                      placeholder=""  @change="inputData($event,'urgingProcessTime')"/><b>&nbsp;&nbsp;时</b>
          </p>
          <p>每次催办的审核人审核时间间隔，0时为不限制时间，刚发起即可催办</p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
      <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="">
          <p style="color:#000"><b>发起人允许每日的催办次数&nbsp;&nbsp;&nbsp;</b>
            <a-input-number
                      :max="99999999"
                      :min="0"
                      v-model="model.urgingCount"
                      placeholder="" @change="inputData($event,'urgingCount')" /><b>&nbsp;&nbsp;次</b>
          </p>
          <p>每日最多同一单据最多催办次数，0次为不限制次数</p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="24">
      <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="">
          <p style="color:#000"><b>发起人允许催办间隔&nbsp;&nbsp;&nbsp;</b>
            <a-input-number
                      :max="99999999"
                      :min="0"
                      v-model="model.urgingTime"
                      placeholder="" @change="inputData($event,'urgingTime')"/><b>&nbsp;&nbsp;时</b>
          </p>
          <p>每次催办的时间间隔，0时为不限制时间</p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isRetrieve">
          <p style="color:#000"><b>流程发起后允许撤回&nbsp;&nbsp;&nbsp;</b>  <a-switch v-model="model.isRetrieveStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isRetrieve')"/></p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isForceRetrieve">
          <p style="color:#000"><b>流程发起后允许强制撤回&nbsp;&nbsp;&nbsp;</b>  <a-switch v-model="model.isForceRetrieveStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isForceRetrieve')"/></p>
          <p>当前配置允许撤回为是有效，强制撤回不会校验流程是否已经审批</p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCancel">
          <p style="color:#000"><b>流程发起后允许作废&nbsp;&nbsp;&nbsp;</b>  <a-switch v-model="model.isCancelStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isCancel')"/></p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isForceCancel">
          <p style="color:#000"><b>流程发起后允许强制作废&nbsp;&nbsp;&nbsp;</b> <a-switch v-model="model.isForceCancelStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isForceCancel')"/></p>
          <p>当前配置允许作废为是才有效，强制作废不会校验流程是否已经审批</p>
        </a-form-model-item>
      </a-col>
      <a-col  :span="12">
        <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isForward">
          <p style="color:#000"><b>流程发起后允许转发&nbsp;&nbsp;&nbsp;</b> <a-switch v-model="model.isForwardStatus" checked-children="开" un-checked-children="关" @change="switchData($event,'isForward')"/></p>
        </a-form-model-item>
      </a-col>
    </a-row>
    </a-form-model>
    </j-form-container>
  </div>
  </a-card>
</template>

<script>
import {getAction, postAction} from '@/api/manage'

export default {
    name: "ExtActProcessSeniorConfig",
    components: {
    },
    props:{
      processId:{
        type: String,
        default: ''
      },
    },
    data () {
      return {
        model:{},
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        validatorRules:{},
        description: '流程业务高级配置页面',
		    url: {
          getSeniorConfig: "/api/erpmng/act/process/extActProcess/getSeniorConfig",
          updateSeniorConfig: "/api/erpmng/act/process/extActProcess/updateSeniorConfig",
        },
        onAuth:false
      }
    },
    watch: {
			processId: {
				handler (val) {
					if (val) {
            this.getSeniorConfig(val);
					} 
				},
				immediate: true
			}
		},
    methods: {
      getSeniorConfig(processId){
        let that=this;
        getAction(that.url.getSeniorConfig, { processId: processId }).then((res) => {
          if (res.success) {
            if(res.result){
              res.result.isUrgingStatus=res.result.isUrging=='1'?true:false;
              res.result.isRetrieveStatus=res.result.isRetrieve=='1'?true:false;
              res.result.isForceRetrieveStatus=res.result.isForceRetrieve=='1'?true:false;
              res.result.isCancelStatus=res.result.isCancel=='1'?true:false;
              res.result.isForceCancelStatus=res.result.isForceCancel=='1'?true:false;
              res.result.isForwardStatus=res.result.isForward=='1'?true:false;
              res.result.isUrgingTypeArray=res.result.isUrgingType.split(",");
              this.model = Object.assign({}, res.result)
              console.log(this.model)
              this.onAuth=true;
            }else{
              this.onAuth=false;
            }
          }
        })
      },
      onChangeNotifyType(checkedValues){
        this.$set(this.model,"isUrgingType",checkedValues.join(','));
        this.updateSeniorConfig(this.model);
      },
      inputData(data,dataType){
        console.log(data);
        this.$set(this.model,dataType,data);
        this.updateSeniorConfig(this.model);
      },
      switchData(data,dataType){
        console.log(data);
        this.$set(this.model,dataType,data?"1":"0");
        this.updateSeniorConfig(this.model);
      },
      updateSeniorConfig(model){
        let that=this;
        postAction(that.url.updateSeniorConfig, model).then((res) => {
          if (res.success) {
            this.getSeniorConfig(model.processId);
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .ant-card-body .table-operator{
    margin-bottom: 18px;
  }
  .anty-row-operator button{margin: 0 5px}
  .ant-btn-danger{background-color: #ffffff}

  .ant-modal-cust-warp{height: 100%}
  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
</style>